
import React, { Component } from 'react';
import axios from 'axios';

import {withRouter} from 'react-router-dom'
class Classify extends Component {
    constructor(props) {
        super(props);
        this.state = {
            classify: [
                    {
                        "btn": "@ctitle(3)",
                        "con|5": [
                            {
                                "id": "@id",
                                "name|+1": ['Java开发', 'Java工程师', '项目经理','PX-Java开发工程师'],
                                "address": "@county(true)",
                                "type|+1": ['1-3年', '3-5年', '5-8年'],
                                "role|+1": ['大专', '本科'],
                                "key": "北京云族佳科技有限公司",
                                "email|+1": ['B轮', '未融资'],
                                "img": "https://s4.ax1x.com/2021/12/11/oTQ0J0.gif",
                                "description":"招聘事业部总经理"
                            }
                        ]
                    }
            ],
            i: 0
        }
    }
    componentDidMount() {
        axios.get("/api/classify").then((res) => {
            this.setState({
                classify: res.data.classify
            })

        })
    }
    saveI = (index) => {
        this.setState({
            i: index
        })
        console.log(1111);
    }

    render() {
        return (
            <div className="classify">
                <div className="side" classify={this.state.classify} i={this.state.i} saveI={this.saveI}>
                    {
                        this.props.classify.map((item, index) => {
                            return (
                                <div key={index} className={`btn ${this.props.i === index ? 'active' : ''}`} onClick={() => { this.props.saveI(index) }}>{item.btn}</div>)
                        })
                    }
                </div>
                <div className="list">
                    {
                        this.state.classify.length > 0 && this.state.classify[this.state.i].con.map((item, index) => {
                            return (
                                <div key={index} className="item">
                                    <img src={item.icon} alt="" />
                                    <span>{item.name}</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}


export default  withRouter(Classify);